<template>
	<div class="container">
		<div class="recommend-title">周末去哪儿</div>
		<ul>
			<li class="item border-bottom" v-for="item in weekendList" :key="item.id" >
				<img :src="item.imgUrl" class="item-img">
				<div class="item-title">{{item.title}}</div>
				<div class="item-desc">{{item.desc}}</div>
			</li>
		</ul>
		<div class="buttom">
			<i class="iconfont icontishi"></i>
			<span><strong>票面价</strong>是指通过景区指定窗口售卖的纸质门票上标注的价格</span>
		</div>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default{
		data(){
			return{
			}
		},
		computed:{
			...mapGetters(['weekendList'])
		}
	}
</script>

<style lang="stylus" scoped>
	@import '../../assets/styles/mixins.styl' 
	.container
		background-color #ccc
		.recommend-title
			line-height :0.7rem
			background :#eee
			text-indent :0.2rem
		.item
			overflow :hidden
			margin-bottom: .1rem;
			background-color #ffffff
			.item-img
				width 100%
			.item-title
				padding 0.13rem 0.2rem 0rem 
				padding-right: 1.4rem;
				color: #212121;
				font-size: .28rem;
				line-height: .48rem;
				ellipsis()
			.item-desc
				padding 0.02rem 0.2rem
				padding-right: 1.4rem;
				color: #616161;
				font-size: .24rem;
				line-height: .42rem;
				ellipsis()
		.buttom
			padding: .14rem .1rem;
			font-size: .24rem;
			line-height: .32rem;
			background: #fff;
			color: #616161;
			i
				float left
			span 
				margin-left 0.1rem
				line-height: .34rem;
				strong
					font-weight 800
</style>
